<template>
  <basic-container v-loading="saveLoading">
    <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;">
      <el-container>
        <el-container>
          <el-aside width="100px">
            <el-button type="primary" @click="handlePrint" style="float: left;">打印</el-button>
          </el-aside>
        </el-container>
      </el-container>
    </div>
    <template>
      <div id="printDetail">
          <div style="background:#fff;height: 50px;line-height: 50px;margin-bottom: 10px">
            <div class="pull-auto"  style="text-align: left;font-size: 16px;color:#3478f5;margin-right:10px">
              <div class="block">
                产线模板名称：{{lineName}}
              </div>
            </div>
          </div>
          <div class="form-designer">
            <el-container style="border: #e0e0e0 solid 1px;border-top:none">
              <el-main class="demo">
                <avue-flow :height="800"
                           width="100%"
                           ref="flow"
                           :option="option"
                           v-model="flowForm">
                  <template #header="{node}" >
                    <el-tooltip class="item" effect="dark" :content="`工位(`+(node || {}).name+`)`" placement="top-start">
                       <span style="width:145px;white-space: nowrap;overflow: hidden;display: inline-block;vertical-align: bottom;text-overflow: ellipsis;">
                          工位({{(node || {}).name}})
                      </span>
                    </el-tooltip>
                  </template>
                  <template slot-scope="{node}">
                     <el-collapse :ref="node.id+`Ref`"  v-model="showActive[node.id]" :style="{width:'100%',zIndex:zIndexStyle}"  @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)">
                  <el-collapse-item title="工序信息" name="1">
                    <el-descriptions  class="margin-top"  style="width: 100%;" title="" :column="1" size="small" border >
                        <el-descriptions-item  label="工序" :labelStyle="{'width': '50px'}"
                          v-model="`process_`+node.id"
                          v-for="(item, index) in workPositionProcessItem[node.id]">

                          {{item.processName}}

                        </el-descriptions-item>
                    </el-descriptions>
                  </el-collapse-item>
                 </el-collapse>
                  </template>
                </avue-flow>

              </el-main>
            </el-container>
          </div>
      </div>
    </template>
  </basic-container>
</template>

<script>
    import {fetchMenuTree } from '@/api/pfoc/pfocprocess'
    import {getLineTplInfo} from '@/api/pfoc/realityproductlinetemplate'

    export default {
        name: "view-line-tpl",
        props:{
            lineId:{//产线ID
                type:String
            },
        },
        data() {
            return {
                count: 0,
                nodeCount:0,//节点下标
                form: [],//提交时数据集合
                flowForm:'',
                option: {
                    name: null,
                    nodeList: [],//工序节点集合
                    lineList: [],//工序各节点指向顺序集合
                },
                lineName:null,//产线名称
                saveLoading:false,//保存时遮罩开关
                processTree:[],//工序集合
                workPositionProcessItem: {},//存储工位对应工序的二位数组
                processProps:{
                       id: 'id',
                       label: 'label',
                       children: 'children',
                       disabled: function (data, node) {//带子级的节点不能选中
                          if(data.processType !== '1') {
                            return true
                          } else {
                            return false
                          }
                        }
                },
                filterText: '',//过滤
                addProcessDialogVisible:false,//工序添加弹窗开关
                addProcessDialogFull:false,//工序添加弹窗放大缩小
                workPositionName:null,//工位名称(用于工序添加)
                workPositionId:null,//工位ID(用于工序添加)
                nodeId:null,//工位节点ID(用于工序添加)
                zIndexStyle:"",
                showActive:[],//属性展示model集合
                lineTplDetailsDelIds:[],//存储需要删除的节点工位ID（即已有工序删除ID）
                mainData:{},//产线模板主数据
                subData:[],//产线模板详情数据
            };
        },
        created() {
        },
        computed: {
            nodeList () {
                return this.option.nodeList
            }

        },
        mounted() {
            this.nodeCount = this.option.nodeList.length;//初始化节点下标
        },
        methods: {
            getRealityProductLineTpl(){
                if(!this.validatenull(this.lineId)) {
                    getLineTplInfo(this.lineId).then(response => {
                        this.$refs.flow.resetPlumb();
                        let data = response.data.data;
                        //主表数据
                        this.mainData= data.lineTpl;//主数据
                        //子表数据
                        this.subData = data.lineTplDetails;//子表数据
                        //产线模板名称
                        this.lineName = this.mainData.lineName;
                        //设置反显工序
                        this.option.nodeList = JSON.parse(this.mainData.processNodes);
                        //设置反显工序指向顺序
                        this.option.lineList =  JSON.parse(this.mainData.processNodeLine);
                        //初始化节点下标
                        var n =  this.option.nodeList[ this.option.nodeList.length-1].id;
                        this.nodeCount = parseInt(n.split("node")[1])+1;
                        //从子表数据中根据nodeId字段将对应的workPositionProcessItem填入到页面的workPositionProcessItem二位数组中
                        for(var i=0;i<this.subData.length;i++){
                            var nodeId = this.subData[i].nodeId;
                            var item =JSON.parse(this.subData[i].workPositionProcessItem);
                            this.$set(this.workPositionProcessItem,nodeId, item);//添加工序集合
                        }
                        //重新初始化flow组件
                        this.$refs.flow.init();
                        this.$refs.flow.cleanupDarg();
                    }).catch(() => {
                        this.saveLoading = false
                    })
                }
            },
            //鼠标移到置顶
              handleMouseEnter(nodeId) {
                  //属性鼠标移到展开
                  // this.$set(this.showActive, nodeId, ['1']);
                  let ref = nodeId+"Ref";//获取到当前的ref
                  this.$refs[ref].$parent.$refs.node.style.zIndex="999999";
                  this.zIndexStyle="1";

              },
              //鼠标移开取消置顶
              handleMouseLeave(nodeId) {
                  //属性鼠标移开关闭
                  // this.$set(this.showActive, nodeId, []);
                  let ref = nodeId+"Ref";//获取到当前的ref
                  this.$refs[ref].$parent.$refs.node.style.zIndex="2";
                  this.zIndexStyle="";
              },
            //打印
            handlePrint () {
                this.$Print('#printDetail');
            },
        }
    };
</script>

<style scoped>
  /deep/.avue-flow__node{
    height: auto!important;
  }
  /deep/ .avue-flow__node-header {
    line-height: 40px;
  }
  /deep/.el-descriptions__title {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }



  /*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
  /deep/.el-table__fixed{
    display: none!important;
  }
  /deep/.el-table__fixed-right{
    display: none!important;
  }
  /deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

  /deep/ .avue-grid{
    display: none!important;
  }
  /deep/.el-main{
    background:#fff !important;
  }
  /deep/.el-card__body{
    padding: 0px!important;
  }
  /*去掉滚动条样式*/
  .demo::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .demo {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
